<!-- 目标达成 -->
<template>
  <div class='target_reach'>
    <Row type='flex' justify="space-between" style="marginBottom:20px">
      <Col span="5" class="total_num"><span
        v-if="pageData.total>0">共{{pageData.total}}个数据</span></Col>
      <Col span="5">
      <Row type='flex' justify="end">
        <Button type="primary" @click="addFun({type:'add'})"
          v-if="unlocking('0107070201')">新增</Button>
        <Button type="primary" @click="exportFun()" style="margin-left: 8px"
          :disabled="pageData.total==0" v-if="unlocking('0107070203')">导出</Button>
      </Row>
      </Col>
    </Row>
    <!-- table 头部筛选 -->
    <dt-grid ref="table" :columns="columns" :list="tableData" />
    <!-- 分页 -->
    <page :pageData='pageData' @pageOnChangeFun='pageOnChangeFun'
      @pageOnPageSizeChangeFun='pageOnPageSizeChangeFun' />
    <!-- 新增、修改达成录入 -->
    <!-- <Modal v-model="addOrEdit" :title="addOrEditTitle" width="70%" :footer-hide="true" :styles="{top: '20px'}">
      <add-edit-enter v-if="addOrEdit" @onClose="closeFun" :flag='addOrEditFlag' :editData='editData' @changeListData="init" />
    </Modal> -->
  </div>
</template>

<script>
  import AddEditEnter from './components/targetReach/AddEditEnter.vue'
  import columns from './components/targetReach/columns'
  import reachApi from '@/biz/synthetic/targetReach'
  import dt from '@dt/dt'
  export default {
    components: { AddEditEnter },
    data() {
      return {
        pageData: {
          total: 0,
          current: 1,
          rows: 10,
          pageSizeOpts: [10, 20, 30, 40, 50],
        },
        tableData: [],
        columns: [],
        addOrEdit: false,
        addOrEditTitle: '',
        addOrEditFlag: 'add',
        editData: {},
      }
    },
    methods: {
      init() {
        this.$refs.table.loading = true
        let params = {
          page: this.pageData.current,
          rows: this.pageData.rows,
          buildingId: this.$dt.buildInfo().housesId,
        }
        reachApi
          .getReachreachList(params)
          .then((res) => {
            this.$refs.table.loading = false
            console.log(res)
            this.tableData = res.list
            this.pageData.total = Number(res.total)
          })
          .catch(() => {
            this.$refs.table.loading = false
          })
      },
      //导出
      exportFun() {
        let buildingId = this.$dt.buildInfo().housesId
        reachApi.getReachreachListForExcel({ buildingId })
      },
      //新增
      addFun(data) {
        console.log(data)
        // this.addOrEdit = true
        // this.addOrEditFlag = data.type
        // if (data.type == 'add') {
        //   this.addOrEditTitle = '达成数据录入'
        // } else {
        //   this.addOrEditTitle = '修改达成数据'
        //   this.editData = data
        // }
        Object.keys(data).length && dt.session.set('targetReach_params', data)
        this.$router.push({
          path: 'AddEditEnter',
        })
      },
      //关闭
      closeFun() {
        this.addOrEdit = false
      },
      //分页触发
      pageOnChangeFun(pages) {
        this.init()
      },
      //改变每页条数触发
      pageOnPageSizeChangeFun(rows) {
        this.init()
      },
    },
    created() {},
    mounted() {
      this.columns = columns.targetReachColumns(this)
      this.init()
    },
  }
</script>
<style lang='scss' scoped>
  .target_reach {
    padding: 20px;

    .total_num {
      line-height: 32px;
    }
  }
</style>